<style lang="scss" scoped>
	.content {}

	.top {
		padding: 20rpx 0;
	}

	.search {
		width: 690rpx;
		height: 68rpx;
		background: #f4f5f7;
		border: 2rpx solid #f5f5f5;
		border-radius: 46rpx;
		margin: 0rpx auto;
		padding: 20rpx;

		.ipt {
			flex: 1;
		}
	}

	.lists {
		padding: 30rpx;

		.list {

			width: 690rpx;
			padding-bottom: 10rpx;
			opacity: 1;
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
			overflow: hidden;
			margin-bottom: 30rpx;

			.head {
				width: 100%;

				.tips {
					width: 136rpx;
					border-bottom: 1px solid #eee;
					border-right: 1px solid #eee;

					.tip {
						height: 68rpx;
					}

					.actived {
						background: #fa5151;
						color: #fff;
					}
				}

				.ordernum {
					height: 136rpx;
					padding: 0 20rpx;
					flex: 1;
					border-bottom: 1px solid #eee;

					>view {
						height: 68rpx;
					}

					.between-flex {
						width: 100%;
					}
				}
			}

			.contains {
				width: 100%;
				padding: 20rpx;

				.text {
					width: 620rpx;
					line-height: 60rpx;
				}
			}

			.btns {
				height: 100rpx;
				justify-content: flex-end;

				padding: 20rpx;

				.btn {
					width: 150rpx;
					height: 68rpx;
					border: 2rpx solid #409eff;
					border-radius: 36rpx;
					margin-left: 50rpx;
				}

			}
		}
	}

	#nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 1000;
	}
</style>

<template>
	<view class="content">
		<view id="nav">
			<view class="top bgwhite">
				<view class="search align-flex">
					<u-icon name="search" color="#666" size="34"></u-icon>
					<input class="ipt p-left20" type="text" v-model="keywords" @input="reset()"
						placeholder="搜索单号/关键词" />
				</view>
			</view>
			<u-tabs :list="nav" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view :style="'height:'+navheight+'px;'"></view>

		<view class="lists ">
			<view class="list" v-for="item,index in list" :key="index">
				<view class="head flex">
					<view class="tips">
						<view class="tip f28 center-flex  actived" :style="'background:'+$degreeColor(item.degree)+';'">
							{{item.degree | degree}}
						</view>
						<view :style="{borderTop: '1px solid #eee;',
						color:$rangeTypeColor(item.rangeType)}" class="tip f28 center-flex ">{{item.rangeType | rangeType}}</view>
					</view>
					<view class="ordernum f28 c999">
						<view class="between-flex">
							<view class="f26">工单号: {{item.orderNum}}</view>
							<view class="f26" :style="'color:'+$statusColor(item.currState)+';'">
								{{item.currStateToName}}</view>
						</view>
						<view class="align-flex">建单时间: {{item.createTime}}</view>
					</view>
				</view>
				<view class="contains between-flex" @click="go(item)">
					<view class="text">
						<view><span class="c999">报修科室:</span><span>{{item.deptId | subject}}</span></view>
						<view><span class="c999">故障分类:</span><span>{{item.faultType | faultType}}</span></view>
						<view class="two"><span class="c999">故障描述:</span><span>{{item.faultRemark | deleteHTMLTag}}</span></view>
						<view v-if="item.detailInfo" class="two"><span
								class="c999 ">详细说明:</span><span>{{item.detailInfo}}</span></view>
						<view><span class="c999">响应类型:</span><span>{{item.responseType | responseType}}</span><span
								class="p-left10" v-if="item.appointment">{{item.appointment}}</span></view>
						<view><span class="c999">报修人:</span><span>{{item.user || '-'}}</span>
						<span v-if="item.phone" class="blue p-left20" @click.stop="$makephone(item.phone)" style="text-decoration: underline;">{{item.phone}}</span></view>
					</view>
					<u-icon name="arrow-right" color="#98a5b3" size="28"></u-icon>
				</view>
				<view class="btns f28 align-flex" v-if="current==0">
					<view class="btn center-flex blue" @click="rejectOrder(index)">退单</view>
					<view class="btn bgblue cfff center-flex" @click="accpetOrder(index)">接单</view>
				</view>
			</view>
		</view>
		<u-popup border-radius="24" mode="bottom" v-model="showPopup" :closeable="true">
			<reject @submit="showPopup=false;reset()" :orderNum="orderNum"></reject>
		</u-popup>
		<u-empty style="position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);" v-if="nomore" text="空空如也~~"
			mode="list"></u-empty>
	</view>



</template>

<script>
	import reject from '@/components/order/reject.vue'
	export default {
		components:{
			reject
		},
		data() {
			return {
				head: this.$head,
				nav: [{
						name: '待接单',
						count: 0,
						temp:'wait_accept'
					}, {
						name: '处理中',
						count: 0,
						temp:'processing'
					}, {
						name: '待评价',
						count: 0,
						temp:'appraisal'
					},
					{
						name: '未过审核',
						count: 0,
						temp:'not_pass_audit'
					}
				],
				current: 1,
				page: 1,
				list: [],
				keywords: '',
				showPopup: false,
				nomore: false,
				navheight: 0,
				orderNum:0
			}
		},
		onLoad() {

			setTimeout(()=>{
			let info = uni.createSelectorQuery().select("#nav");
			info.boundingClientRect((data) => {
			
				this.navheight = data.height
			
				console.log(this.navheight)
			}).exec()	
			},600)
		},
		onShow() {
			this.reset()
		},
		onReachBottom() {
			this.getlist()
		},
		methods: {
			rejectOrder(index){
				this.orderNum=this.list[index].orderNum
				this.showPopup=true
			},
			accpetOrder(index){
				this.orderNum=this.list[index].orderNum
				uni.showModal({
					title:'确认接单吗？',
					success: (res) => {
						if(res.confirm){
							this.$pop.ajaxPost('/wechat/order/receiving', {
								orderNum:this.orderNum
							}).then(res=>{
								if(res.code==0){
									this.$msg('接单成功')
									this.reset()
								}
							})
						}
					}
				})
			},
			go(item) {
				let {orderNum,isReview} = item
				if (this.current == 0) {
					this.$navTo('/pages/orderReciving/detail?orderNum=' + orderNum)
				} else {
					this.$navTo(`/pages/myOrder/detail?orderNum=${orderNum}&isReview=${isReview || false}`)
				}

			},
			getredinfo() {
				this.$pop.ajaxPost('/busOrderFault/getWechatViewRedV2').then(res=>{
					this.nav[0].count=res.body.wait_accept
					this.nav[1].count=res.body.processing
					this.nav[2].count=res.body.appraisal
					this.nav[3].count=res.body.not_pass_audit
				})
			},
			reset() {
				this.list=[]
				this.page = 1
				this.getlist()
				this.getredinfo()
			},
			change(index) {
				this.current = index;
				this.reset()
			},
			getlist() {
				
				this.$pop.ajaxPost('/busOrderFault/getWechatViewV2', {
					query:this.keywords,
					pageNum: this.page,
					pageSize: 10,
					currState:this.nav[this.current].temp
				}).then(res => {
					if (res.code == 0) {



						var list = res.body.list
						console.log('list', list)
						if (this.page == 1) {

							this.list = list
						} else {
							this.list = this.list.concat(list)
						}

						this.page++
						this.list.length == 0 ? this.nomore = true : this.nomore = false
					}
				})

			}

		}
	}
</script>
